<script setup>
	import { computed, watch } from 'vue'
	import { useStore } from 'vuex'
	import { useRoute } from 'vue-router'
	const store = useStore()
	const route = useRoute()
	
	// 菜单数据
	const asideMenus = store.state.app.asideMenus
	// 是否收缩菜单
	const collapse = computed(() => store.state.app.collapse)
	// 激活的子菜单
	const activeMenus = computed(() => store.state.app.activeMenus)
	// 激活的菜单项
	const activeMenuItem = computed(() => store.state.app.activeMenuItem)
	
	// 检查当前激活的菜单名称是否存在 若不存在则赋值
	const checkActiveMenuItemExit = function () {
		if (activeMenuItem.value) return
		store.commit('app/setActiveMenuItem', route.path)
	}
	checkActiveMenuItemExit()
	
	watch(() => route.path, (newPath) => {
		if (newPath.indexOf('/main') == -1) return
		store.commit('app/setActiveMenuItem', newPath)
	}, { immediate: false })
	
	// 展开subMenu时
	const openSubMenu = function (index) {
		activeMenus.value.push(index)
		store.commit('app/setActiveMenus', activeMenus.value)
	}
	// 收起subMenu时
	const closeSubMenu = function (index) {
		let idx = activeMenus.value.indexOf(index)
		activeMenus.value.splice(idx, 1)
		store.commit('app/setActiveMenus', activeMenus.value)
	}
</script>

<template>
	<div class="logo-wrap">
		<img src="/src/assets/images/logo.png" width="30">
		<span :class="{ hide: collapse }">后台管理系统</span>
	</div>
    <el-menu
		:collapse="collapse == 1"
		router
		:unique-opened="false"
		:default-openeds="activeMenus"
		:default-active="activeMenuItem"
		@open="openSubMenu"
		@close="closeSubMenu"
	>
		<template v-for="(item1, index1) in asideMenus">
			<el-menu-item :index="item1.path" v-if="item1.children.length <= 0">
			    <el-icon>
			        <component :is="item1.meta.iconName || null"></component>
			    </el-icon>
			    <span class="menu-name" :title="item1.meta.title">{{ item1.meta.title }}</span>
			</el-menu-item>
			
			<el-sub-menu :index="item1.path" v-else>
			    <template #title>
			        <el-icon>
			            <component :is="item1.meta.iconName || null"></component>
			        </el-icon>
			        <span class="menu-name" :title="item1.meta.title">{{ item1.meta.title }}</span>
			    </template>
				
				<template v-for="(item2, index2) in item1.children">
					<el-menu-item :index="item2.path" v-if="item2.children.length <= 0">
					    <el-icon>
					        <component :is="item2.meta.iconName || null"></component>
					    </el-icon>
					    <span class="menu-name" :title="item2.meta.title">{{ item2.meta.title }}</span>
					</el-menu-item>
					
					<el-sub-menu :index="item2.path" v-else>
					    <template #title>
					        <el-icon>
								<component :is="item2.meta.iconName || null"></component>
					        </el-icon>
					        <span class="menu-name" :title="item2.meta.title">{{ item2.meta.title }}</span>
					    </template>
						
						<template v-for="(item3, index3) in item2.children">
							<el-menu-item :index="item3.path" v-if="item3.children.length <= 0">
							    <el-icon>
									<component :is="item3.meta.iconName || null"></component>
							    </el-icon>
							    <span class="menu-name" :title="item3.meta.title">{{ item3.meta.title }}</span>
							</el-menu-item>
						</template>
					</el-sub-menu>
				</template>
			</el-sub-menu>
		</template>
    </el-menu>
</template>

<style scoped lang="less">
	.logo-wrap {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: #fff;
		padding: 0 0 0 16px;
		cursor: pointer;
		span {
			width: 112px;
			margin-left: 5px;
			font-size: 18px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: left;
			transition: all 0.3s;
		}
		span.hide {
			width: 0px;
		}
	}
	
    // 一级菜单
    .el-menu {
        width: 180px;
        background: transparent;
        border-right: none;
		
		&.el-menu--collapse {
			width: 64px;
		}

        .el-sub-menu {
            width: 100%;
            :deep .el-sub-menu__title {
                height: 50px;
                line-height: 50px;
                padding-left: 20px !important;
                padding-right: 20px;
				color: #fff;
				&:hover {
					background-color: #263445;
				}
				
                .el-icon {
                    width: 20px;
                    margin-right: unset;
                }
                .menu-name {
					max-width: 100px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 1;
                    margin-left: 5px;
                }
                .el-icon.el-sub-menu__icon-arrow {
                    width: 15px;
                }
            }
            
            // 二级菜单
            :deep .el-menu {
                background: transparent;
                
                // 三级菜单
                :deep .el-menu {
                    background: transparent;
                }
            }
        }

        .el-menu-item {
            min-width: unset;
            padding-left: 20px !important;
            padding-right: 20px;
            height: 50px;
            line-height: 50px;
			color: #fff;
			&.is-active {
				color: #409eff;
			}
			&:hover {
				background-color: #263445;
			}
			
            .el-icon {
                width: 20px;
                margin-right: unset;
            }
            .menu-name {
				max-width: 100px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 1;
                margin-left: 5px;
            }
        }
    }
</style>

